Top 19 Beautiful And Inspiring Lightbox Image Viewer Examples
This is a javascript / CSS based image viewer prepared to display product photos, maps or any image within custom small area.Fit or Fill the image
Custom alignment – on clicking reset button aligns the image in specified way
- On Image Load.Lightbox Gallery example added.
The mega jQuery image viewer plugin allows you to easily replace <div> tagswith animated image viewers. Viewer used for displaying high-resolution object (image – JPG, PNG, GIF). Viewer displays the given display object inside the user-defined viewport area. Viewer allows to control the position and zoom of the object displayedinside the viewport. Viewer controls the sliding and zoom of the displayed objectso that the viewport area will be filled completely. Package contains a example for building lightbox gallery (ColorBox Gallery). Cross-browser compatible – Image Viewer is compatible with IE, CHROME, FIREFOX, OPERA, SAFARI.Viewer functionality:
set image source from javascript {“contentUrl” : “images/my_image. set image source from html <img src=”images/my_image. Set image scale method.
Image Gallery with Vertical Thumbnail Navigator
Slider can be put anywhere (lightbox, or any container)
This is a HTML | CSS | JQuery Grid with a Lightbox, you can specify thumbnails for the grid and when you click on it to open the lightbox it will load the normal image, you can specify the text for the captions and for the lightbox. Fully Responsive Grid and Lightbox
Lightbox with slideshow (play, pause, auto-play)
IE was showing fat images in the lightbox and now is fix
Fixed a small console errors and also a small bug when you click to fast the next button in the lightbox
ImageDirectory extends the functionality of DirectoryHandler by displaying directories specifically containing images; also makes use of lightbox. Perfect for displaying directories in a clean way, and an easy way to create an image gallery without the need for a database.
6. jSliderPro
To enrich your ads viewer.jSliderPro gives the option to set an image for navigation buttons and bullets.On-the-fly image resize and clip.
NACHO Lightbox is the perfect plugin for showcasing images, videos, iframes and even ajax in a modern and usable manner that is available on every device. Deep linking – So when someone shares your image will be taken directly to that image.
When a thumbnail is pressed you can choose either to display an original media lightbox which we have coded, no action or open a webpage. The lightbox can display images, iframe (html pages) and videos loaded from YouTube or Vimeo.Thumbnail’s description or thumbnail’s media icons: each thumb can have a short description with a transparent background under it or a media icon which represents a link, iframe, video or image, this are visible when the mouse is over a thumbnail, the text can be formatted with CSS, the jQuery CSS background color and opacity also can be modified (optional). Custom press thumbnail action: when a thumbnail is pressed you can choose either to display an original media lightbox which we have coded, or to open a new webpage, the url and target of this webpage can be specified. The lightbox can display images, iframe (html pages) or videos loaded from YouTube or Vimeo. Also the grid can be set when a thumbnail is pressed to do nothing, this way it can be used as a image gallery CSS wall.Lightbox main features.Iframe support: The lightbox can display HTML pages, all you have to do is to include the link of your page that you want to display.Image support: The lightbox can load and display .Zoom and panning support for images: The images can be zoomed in and out or paned, this way you can see the image in great detail (optional).
Original media lightbox that we have coded, with image, vimeo, youtube or iframe support. The lightbox can be used when a thumbnail is clicked to display media content.
Imagebox can be closed by clicking the darkened area outside the image. Right arrow: next image. Left arrow: previous image. Each image and gallery can have its own options. Changed html format to match Lightbox.
MultiMedia Gallery Slideshow with Music could be used as a gallery viewer, or a slideshow for your website or any kind of product viewer. Optional image title
Optional image link
Optional image lightbox (Prettyphoto)
Optional link whole image to lightbox or external url
JQuery Thumbnail Gallery With Lightbox
JQuery AutoSlide Image Gallery Slideshow with Music
Giga large image viewer jQuery displays very large images without loading the whole
image, giga viewer loads only needed fragment of the big image divided into small
The giga jQuery image viewer plugin allows you to easily replace <div> tags with animated image viewers with hotspots. Viewer used for displaying very high-resolution JPG.Package contains command line program (for Windows only) and php script, for cutting images into pieces (max tested image had size 9000×9000 px). Viewer displays the given high-resolution JPG inside the user-defined viewport area.Viewer allows to control the position and zoom of the high-resolution JPG inside the viewport.Viewer controls the sliding and zoom of the high-resolution JPG so that the viewport area will be filled completely. Package contains a program for cutting image. Package contains a example for building lightbox gallery (ColorBox Gallery). Cross-browser compatible – Image Viewer is compatible with IE, CHROME , FIREFOX, OPERA , SAFARI.Viewer functionality:
reading current image position and scale
Includes three optional lightbox plugins (fancyBox, colorBox and prettyPhoto); although it is possible to user other lightbox solutions
No need for PHP unless internal image scaler is utilized; an external (web based) image scaling service is utilized by default
Added 2nd Cloud based Image Scaling Service to create Thumbnails
Added option to assign custom Class Name to all items that can be opened via Lightbox (in case you want to use a different Lightbox solution than the ones included; can be used to target these Classes specifically)
Lightbox feature that can let users open and see images full-window
– Simple page block with lightbox button
– Lightbox only, that can be opened by a button
- lightbox feature
- a image gallery HTML code generator tool, to help easy generate viewer code.Before After Viewer
- Every project can have a title/small info, that will displayed under the viewer.- Can be used even as simple image slider viewer, if you don't provide the alternate image for the projects.
15. iTunes Charts
Hooks into youtube, and displays the image of the track on the script, linked to the HTML5 embed youtube video for that track in a lightbox, and links to download the track from iTunes ( this is NOT affiliate linked )
It can also be turned into a slideshow so that your viewer can see your work without having to do nothing.Lightbox support
Image and thumbnails’ container size are re-sizable
Different text descriptions are assignable for each image
AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery with a set of really unique transitions that were nver available before, as well as some basic transitions, so the slider will fit into every project. It comes with an image preloader so the slider starts when images are ready to be shown. The slider also already comes with the famous prettyPhoto lightbox, but you are of course free to use any other
Features of the Avia 3d image slider
Included Image preloader
already prepared to work with prettyPhoto Lightbox
To drastically reduce page loading times, lazy loading can be activated on a per image basis, so that images will only be loaded right before they need to be shown.Added work around to prevent the shadow from falling behind a parent div’s background image/color in certain configurations
Added lightbox integration on non-video slides
“I have been using a flash based image viewer for over 7 years on my website as no jQuery had up to now come close.
Simple Portofolio Viewer – Features
Smart navigation and image pre-loading. Resizable images and expand sliding image using jQuery lightbox
Custom link for each image
XML Configuration – Title, Description, Link, Image